<template>
  <el-row class="tbheader">
    <el-col :span="leftColSpan">
      <slot name="filter">
        <el-input
                v-model="queryListData[label]"
                :placeholder="placeholder"
                clearable class="input-w" size="mini"
                @clear="handleFilter"
                @keyup.enter="handleFilter"
        />
      </slot>
      <slot>
        <el-button @click="handleFilter" type="primary" class="ml10" size="mini">
          <el-icon>
            <search />
          </el-icon>
          搜索
        </el-button>
      </slot>
    </el-col>
    <el-col :span="rightColSpan" align="right">
      <slot name="operation">
        <el-button type="primary" size="mini">
          <el-icon>
            <plus />
          </el-icon>
          新建
        </el-button>
      </slot>
    </el-col>

  </el-row>
</template>

<script>
  import {toRef} from 'vue'
  import {Search, Plus} from "@element-plus/icons"

  export default {
    name: "TableFilter",
    components: {Search, Plus},
    props: {
      queryList: {
        type: Object,
        default() {
          return {
            page: 1,
            pagesize: 10,
            keyword: ''
          }
        }
      },
      placeholder: {
        type: String,
        default: '请输入关键词'
      },
      rightColSpan: {
        type: Number,
        default: 12
      },
      leftColSpan: {
        type: Number,
        default: 12
      },
      label: {
        type: String,
        default: 'keyword'
      }
    },
    emits: ['pagination'],
    setup(props, context) {
      const queryListData = toRef(props, 'queryList')

      const handleFilter = () => {
        queryListData.value.page = 1
        context.emit('pagination', queryListData.value)
      }

      return {
        queryListData,
        handleFilter
      }
    }
  }
</script>

<style scoped>

</style>
